<template>
  <div class="parking-add">
    <vue-form ref="vueForm" formLabel="140px" :formItem="form_item" :fromHandler="form_handler" :formData="form_data"></vue-form>
  </div>
</template>

<script>
import {Detailed,Edit} from "@/api/member.js";
import VueForm from "@c/form";
import {formatRequestData} from "@/utils/format.js";

export default {
  name: "MemberInfo",
  components: {
    VueForm
  },
  data() {
    return {
      form_data: {
        username: "",
        truename: "",
        cardId: "",
        gender: "",
        illegalAmount: "",
        cardPhoneFace: "",
        cardPhoneBack: "",
        blacklist: ""
      },
      id: this.$route.query.id,
      form_item: [
        {
          type:"Input",
          label:"用户名",
          prop:"username",
          width:"300px",
          required:true,
        },
        {
          type:"Input",
          label:"真实姓名",
          prop:"truename",
          width:"300px",
          required:true,
        },
        {
          type:"Input",
          label:"身份证",
          prop:"cardId",
          width:"300px",
          required:true,
        },
        { 
          type:"Radio",
          label:"性别",
          prop:"gender",
          required:true,
          options: this.$store.state.config.gender,
        },
        { 
          type:"InputNumber",
          label:"违章预存金",
          prop:"illegalAmount",
          required:true,
        },
        {
          type:"Text",
          label: "注意",
          content: "七牛云测试空间过期了，别上传啦，除非再开通个免费测试空间，然后再改下url"
        },
        { 
          type:"Upload",
          label:"身份证（正面)",
          prop:"cardPhoneFace",
        },
        { 
          type:"Upload",
          label:"身份证（反面)",
          prop:"cardPhoneBack",
        },  
        { 
          type:"Radio",
          label:"黑名单",
          prop:"blacklist",
          options: this.$store.state.config.blacklist,
          required:true
        },
      ],
      form_handler: [
        {label: "确定",key:"submit",type:"primary",handler:()=>this.onSubmit()},
        {label: "重置",key:"reset",type:"danger",handler:()=>this.reset()}
      ],
      btnLoading: false,
    } 
  },
  beforeMount() {
    this.id && this.handleDetail();
  },
  methods: {
    handleDetail() {
      Detailed({id:this.id}).then((res) => {
        this.form_data = formatRequestData(this.form_data,res.data)
        const data = res.data;
        data && (this.data = data);
      })
    },
    onSubmit() {
      this.$refs.vueForm.$refs.form.validate((valid) => {
        if (valid) {
          this.id && this.edit();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    edit() {
      const data = Object.assign({},this.form_data);
      data.id = this.id;
      this.btnLoading = true
      Edit(data)
        .then((res) => {
          this.$message({
            message: res.message,
            type: "success"
          })
          this.btnLoading = false
          this.$router.push({
            name: "MemberList"
          })
        }).catch((err) => this.btnLoading = false)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>